<template>
  <div class="box">
    <!-- 顶部我的 -->
    <div class="box1">
      <h2 class="wode">我的</h2>
      <router-link to="/set">
        <i class="shezhi iconfont icon-shezhi"></i>
      </router-link>
      <i class="shezhi1 iconfont icon-lingdang"
         @click="friendxiaoxi"></i>
      <i class="shezhi2 iconfont icon-shangchuantupian"
         @click="addFriends"></i>
    </div>
    <!-- 个人信息 -->
    <div class="box2">
      <div class="geren">
        <div class="yuan">
          <img :src="userInfo.faceImage?(userInfo.faceImage.split('/')[0] === 'M00'? 'http://123.56.23.31:88/st/' + userInfo.faceImage :userInfo.faceImage): defaultHeadImg"
               alt="头像"
               class="yuan" />
        </div>
        <div class="xinxi">
          <router-link to="/personal">
            <div class="nicheng">
              {{ userInfo.length === 0 ? "登录/注册" : userInfo.nickname }}
            </div>
            <div class="nicheng"
                 style="font-size:12px;">{{userInfo.phone}}</div>
          </router-link>
        </div>
        <div class="yonghu"
             v-if="userInfo.length === 0 ? false : true">
          <div class="yonghu1"
               @click="$router.push('/set')">
            个人用户
            <i class="jiantou iconfont icon-arrow-right-copy-copy-copy"></i>
          </div>
        </div>
      </div>
      <div class="guanzhu"
           v-if="userInfo.length === 0 ? false : true">
        <div class="guanzhu1">
          <div class="shuliang"
               style="margin-left: 10px">32</div>
          <div class="shuliang">关注</div>
        </div>
        <div class="guanzhu2">
          <div class="shuliang"
               style="margin-left: 12px">5</div>
          <div class="shuliang">粉丝</div>
        </div>
        <div class="guanzhu3">
          <div class="shuliang"
               style="margin-left: 12px">8</div>
          <div class="shuliang">动态</div>
        </div>
      </div>
    </div>
    <!-- 记录 -->
    <div class="box3">
      <div class="yimiao">
        <i class="yimiao1 iconfont icon-yimiaojilu"
           style="color: rgb(228, 84, 32); font-size: 32px"></i>
        <router-link to="/personal">
          <span class="yimiao3">疫苗记录</span>
        </router-link>
        <i class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="yimiao">
        <i class="yimiao1 iconfont icon-wodeyuyue"
           style="color: rgb(228, 84, 32); font-size: 25px; margin-left: 5px"></i>
        <span class="yimiao3">我的预约</span>
        <i class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
    </div>
    <div class="box4">
      <div class="yimiao">
        <!-- 遮罩层 -->
        <van-overlay :show="showOverlay"
                     @click="showOverlay = false">
          <div class="wrapper"
               @click="showOverlay = false">
            <van-image class="block"
                       width="280px"
                       height="280px"
                       :src="'http://123.56.23.31:88/st/' + userInfo.qrcode" />
          </div>
        </van-overlay>
        <i @click="showOverlay = true"
           class="yimiao1 iconfont icon-wodewenzhen"
           style="
            color: rgba(180, 152, 245, 100);
            font-size: 25px;
            margin-left: 5px;
          "></i>
        <!-- <router-link to="/chat">
          
        </router-link> -->
        <span class="yimiao3"
              @click="showOverlay = true">我的二维码</span>
        <i @click="showOverlay = true"
           class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="yimiao">
        <i class="yimiao1 iconfont icon-wode-dingdan"
           style="
            color: rgba(180, 152, 245, 100);
            font-size: 25px;
            margin-left: 5px;
          "></i>
        <router-link to="/order">
          <span class="yimiao3">我的订单</span>
        </router-link>
        <i class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="yimiao"
           @click="showfrienddialog">
        <i class="yimiao1 iconfont icon-yuyuezhongxin"
           style="
            color: rgba(180, 152, 245, 100);
            font-size: 25px;
            margin-left: 5px;
          "></i>
        <span class="yimiao3">我的好友</span>
        <i class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
      <div class="yimiao"
           @click="showUserFankui">
        <i class="yimiao1 iconfont icon-yonghufankui"
           style="
            color: rgba(180, 152, 245, 100);
            font-size: 25px;
            margin-left: 5px;
          "></i>
        <span class="yimiao3">用户反馈</span>
        <i class="yimiao2 iconfont icon-arrow-right-copy-copy-copy"></i>
      </div>
    </div>
    <div></div>
    <div></div>
    <common-footer></common-footer>
    <!-- 添加好友对话框 -->
    <van-dialog theme="round-button"
                v-model="showAddFriendRequest"
                title="添加好友"
                :showConfirmButton="false"
                show-cancel-button>
      <van-search @blur="inputFriendName"
                  v-model="searchValue"
                  placeholder="请输入用户名" />
      <div class="friendListBox"
           v-show="friendStatus">
        <van-divider />
        <van-row>
          <van-col span="6">
            <van-image round
                       width="50px"
                       height="50px"
                       :src="
                friendPhoto.split('/')[0] === 'M00'
                  ? 'http://123.56.23.31:88/st/' + friendPhoto
                  : friendPhoto
              " />
          </van-col>
          <van-col span="6">
            <span>{{ friendName }}</span>
          </van-col>
          <van-col span="6">
            <van-button icon="https://img01.yzcdn.cn/vant/user-active.png"
                        type="info"
                        size="mini"
                        plain
                        @click="sendFriendqingqiu">
              添加
            </van-button>
          </van-col>
        </van-row>
        <van-divider />
      </div>
    </van-dialog>

    <!-- 好友列表查看 -->
    <van-dialog theme="round-button"
                v-model="showFriendList"
                title="好友列表"
                :showConfirmButton="false"
                show-cancel-button>
      <div class="friendListBox"
           :key="index"
           v-for="(item, index) in showUserList"
           v-show="friendList">
        <van-divider />
        <van-row>
          <van-col span="6"
                   offset="2">
            <van-image round
                       width="50px"
                       height="50px"
                       :src="
                item.faceImage.split('/')[0] === 'M00'
                  ? 'http://123.56.23.31:88/st/' + item.faceImage
                  : item.faceImage
              " />
          </van-col>
          <van-col span="6">
            <span>{{ item.username }}</span>
          </van-col>
          <van-col span="6">
            <van-button icon="https://img01.yzcdn.cn/vant/user-active.png"
                        type="danger"
                        size="mini"
                        plain
                        @click="deleteFriend(item.id)">
              删除
            </van-button>
          </van-col>
          <van-col span="6">
            <van-button icon="https://img01.yzcdn.cn/vant/user-active.png"
                        type="info"
                        size="mini"
                        plain
                        @click="chatTalk(item.id)">
              聊天
            </van-button>
          </van-col>
        </van-row>
        <van-divider />
      </div>
      <van-empty description="暂无好友"
                 v-if="!friendList" />
    </van-dialog>

    <!-- 好友申请处理 -->
    <van-dialog theme="round-button"
                v-model="friendMessage"
                title="好友申请"
                :showConfirmButton="false"
                show-cancel-button>
      <div class="friendListBox"
           v-show="showfriendMessage"
           :key="index"
           v-for="(item, index) in shenqinList">
        <van-divider />
        <van-row>
          <van-col span="6"
                   offset="2">
            <van-image round
                       width="50px"
                       height="50px"
                       :src="
                item.sendFaceImage.split('/')[0] === 'M00'
                  ? 'http://123.56.23.31:88/st/' + item.sendFaceImage
                  : item.sendFaceImage
              " />
          </van-col>
          <van-col span="6">
            <span>{{ item.sendUsername }}</span>
          </van-col>
          <van-col span="6">
            <van-button icon="https://img01.yzcdn.cn/vant/user-active.png"
                        type="success"
                        size="mini"
                        plain
                        @click="nextFriendMessage(item.sendUserId, 1)">
              同意
            </van-button>
          </van-col>
          <van-col span="6">
            <van-button icon="https://img01.yzcdn.cn/vant/user-active.png"
                        type="danger"
                        size="mini"
                        plain
                        @click="nextFriendMessage(item.sendUserId, 0)">
              拒绝
            </van-button>
          </van-col>
        </van-row>
        <van-divider />
      </div>
      <van-empty description="暂无好友请求"
                 v-if="!showfriendMessage" />
    </van-dialog>

    <!-- 反馈 -->
  </div>
</template>


<script>
var lock = true
import { selectMyFriendIsExist, deleteFriend, showMyFriend, searchFriend, sendFriendRequest, queryFriendRequest, operFriendRequest } from "../../api/getData.js";
import CommonFooter from "@/components/CommonFooter.vue";
import defaultHeadImg from "../../assets/logo.png"
export default {
  computed: {

  },
  components: {
    CommonFooter
  },
  data () {
    return {
      userInfo: {},
      defaultHeadImg: defaultHeadImg,
      showAddFriendRequest: false,
      searchValue: "",
      friendName: "",
      friendPhoto: "",
      tips: "",
      friendStatus: false,
      showFriendList: false,
      friendList: false,
      friendMessage: false,
      showfriendMessage: false,
      showOverlay: false,
      shenqinList: [],
      haoyouList: [],
      showUserList: []
    }
  },
  methods: {
    // 添加好友
    addFriends () {
      this.showAddFriendRequest = true
      this.searchValue = ""
    },
    // 查找要添加的好友
    inputFriendName () {
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      searchFriend(this.searchValue, this.userInfo.id).then(res => {
        this.$message.clear()
        if (res.data.status === 200 && res.data.msg === "OK") {
          this.friendStatus = true
          this.friendName = res.data.data.username
          this.friendPhoto = res.data.data.faceImage
        } else {
          this.friendStatus = false
          this.$message(res.data.msg);
        }
      }).catch(err => {
        this.$message.clear()
        this.$message.fail("网络不通畅");
      })
    },
    // 给好友发送好友请求
    sendFriendqingqiu () {
      sendFriendRequest(this.searchValue, this.userInfo.id).then(res => {
        this.$message.success(res.data.data);
      })
    },
    // 展示好友列表
    showfrienddialog () {
      this.friendList = false
      this.showFriendList = true
      this.$message.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      showMyFriend(this.userInfo.id).then(res => {
        if (lock) {
          res.data.data.forEach(item => {
            this.showUserList.push(item.user)
          })
          this.$message.clear()
        }
        if (this.showUserList.length === 0) {
          lock = true
          this.$message.clear()
        } else {
          this.friendList = true
          lock = false
          this.$message.clear()
        }

      })
    },
    // 删除好友
    deleteFriend (friendID) {
      deleteFriend(friendID).then(res => {
        this.$message.success("删除成功");
        this.$router.go(0)
      }).catch(() => {
        this.$message.fail("删除失败");
      })
    },
    // 通过好友申请
    friendxiaoxi () {
      this.friendMessage = true
      queryFriendRequest(this.userInfo.id).then(res => {
        // 申请的消息数据
        if (res.data.data.length !== 0) {
          this.showfriendMessage = true
          this.shenqinList = res.data.data
        }
      })
    },
    nextFriendMessage (id, status) {
      operFriendRequest(this.userInfo.id, id, status).then(res => {
        this.$message.success(res.data.msg === "OK" ? "已拒绝请求" : "已通过请求");
        this.friendMessage = false
        this.$router.go(0)
      })
    },
    // 用户反馈
    showUserFankui () {

    },
    // chat聊天
    chatTalk (friendId) {
      selectMyFriendIsExist(this.userInfo.id, friendId).then(res => {
        if (res.data.status === 500) {
          this.$message.fail("对方已经不是你的好友,聊天失败");
          this.$router.go(0)
          return;
        } else {
          this.$router.push({ path: '/chat', query: { myuserId: this.userInfo.id, friendId: friendId } })
        }
      })

    }
  },

  mounted () {

  },
  created () {
    // console.log(document.cookie);
    if (window.localStorage.getItem('userData') == null) {
      this.userInfo = []
    } else {
      this.userInfo = JSON.parse(window.localStorage.getItem('userData'))
    }
    console.log(this.userInfo);
  }
};
</script>

<style lang="scss" scoped>
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  //  display: flex;
  // justify-content: space-around;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: rgb(141, 64, 64);
}
/deep/.van-image__img {
  border-radius: 30px !important;
  box-shadow: 0px 0px 50px skyblue;
  animation: Light Linear 4s infinite alternate;
}
@keyframes Light {
  to {
    box-shadow: 0px 0px 50px skyblue;
  }
  from {
    box-shadow: 0px 0px 50px yellowgreen;
  }
}
.wode {
  margin-left: 45%;
  font-weight: bold;
  position: absolute;
}
.shezhi {
  margin-left: 80%;
  font-size: 18px;
  color: black;
  position: absolute;
}
.shezhi1 {
  float: right;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-right: 60px;
  color: black;
}
.shezhi2 {
  float: left;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-left: 15px;

  color: black;
}
.box2 {
  height: 135px;
  width: 100%;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  margin-top: 6px;
  // display: flex;
  // justify-content: space-around;
}
.geren {
  width: 100%;
  height: 85px;
  //  background-color:red;
  position: relative;
}
.yuan {
  height: 70px;
  width: 70px;
  border-radius: 50px;
  // background-color: black;
  position: absolute;
  top: 4px;
  left: 2px;
}
.xinxi {
  width: 120px;
  height: 60px;
  // background-color: blue;
  position: absolute;
  left: 85px;
  top: 20px;

  // margin-top: 20px;
}
.nicheng {
  font-size: 16px;
  margin: 8px 0;
  color: black;
  font-weight: 600;
}
.yonghu {
  width: 70px;
  height: 20px;
  // background-color: blue;
  float: right;
  margin-top: 30px;
}
.yonghu1 {
  font-size: 12px;
  line-height: 20px;
}
.jiantou {
  font-size: 12px;
}
.guanzhu {
  width: 100%;
  height: 50px;
  // background-color: black;
  position: relative;
}
.guanzhu1 {
  height: 50px;
  width: 50px;
  // background-color: blueviolet;
  position: absolute;
  left: 20px;
  // top: px;
}
.guanzhu2 {
  height: 50px;
  width: 50px;
  // background-color: blueviolet;
  position: absolute;
  left: 45%;
  // top: 10px;
}
.guanzhu3 {
  height: 50px;
  width: 50px;
  // background-color: blueviolet;
  float: right;
  margin-right: 20px;
  // margin-top: 10px;
}
.shuliang {
  font-size: 12px;
  line-height: 25px;

  margin-left: 6px;
}
.box3 {
  width: 100%;
  height: 100px;
  margin-top: 7px;
  // display: flex;
  margin-bottom: 19px;
  justify-content: space-around;
}
.yimiao {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  margin-bottom: 10px;
  // background-color: rgb(118, 111, 111);
  border-radius: 13px;
  // justify-content: space-around;
  justify-content: space-between;
  box-shadow: 2px 2px 6px #ccc;
}

.yimiao3 {
  margin-left: 5px;
  font-size: 14px;
  color: black;
}
.yimiao2 {
  margin-left: 65%;
  font-size: 15px;
}
.box4 {
  width: 100%;
  height: 205px;
}
.yimi {
  // margin-left: 0;
  position: absolute;
  left: 92%;
  // margin-right: 200px;
}
/deep/.friendListBox .van-row {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
</style>